<template>
  <div class="main box clmcenter radial-gradient-demo">
    <button class="hoverbtn" @click="toNext('before')">Before</button>
    <button class="hoverbtn" @click="toNext('index2022')">2022年</button>
    <button class="hoverbtn" @click="toNext('index2023')">2023年</button>
    <button class="hoverbtn" @click="toNext('index2024')">2024年</button>
    <button class="hoverbtn" @click="toNext('cases')">产品案例</button>
  </div>
</template>
<script>
export default {
  methods: {
    toNext(val) {
      // let st = setTimeout(() => {
      this.$router.replace("/" + val);
      //   clearTimeout(st);
      // }, 500);
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  .hoverbtn {
    font-size: 2.5rem;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    border: none;
    border-radius: 22px;
    padding: 1.5rem 4rem;
    // transition: 0.5s;
    // background-size: 250%;
    // background-image: linear-gradient(
    //   322.24deg,
    //   #6082b6,
    //   #d3cefc 50%,
    //   #6082b6 75%
    // );
    // box-shadow: 0px 0px 20px #d3cefc, 0px 5px 5px -1px #6082b6,
    //   inset 4px 4px 8px #d3cefc, inset -4px -4px 8px #6082b6;
    background-image: linear-gradient(to bottom, #040404, #5e5e5b);
    box-shadow: 0 5px 20px 0 rgba(51, 51, 51, 0.375),
      inset 0 -3px 0 0 rgba(51, 51, 51, 0.125);
    transition: 0.5s ease;
    margin-bottom: 3rem;
  }

  .hoverbtn:hover {
    background-position: right center;
    // box-shadow: 0px 5px 50px #6082b6, 0px 10px 10px -4px #d3cefc,
    //   inset 4px 4px 8px #d3cefc, inset -4px -4px 8px #6082b6;
  }
}
</style>
